<template>
	<view>
		<view style="margin: 10px 0 10px 10px;">{{titletime}}</view>
		<VePie :data="chartData"></VePie>
		<u-table border-color="null" style="margin-top: 10px;">
			<u-tr class="u-tr">
				<u-th class="u-th" v-for="item in visittitle">{{item}}</u-th>
			</u-tr>
			<u-tr class="u-tr" style="height: 76rpx;" v-for="item in visitlist">
				<u-td class="u-td"><text @click="clickrow(item)" >{{item.realname}}</text></u-td>
				<u-td class="u-td"><text @click="clickrow(item)" >{{item.callback_num}}</text></u-td>
				<u-td class="u-td" style="display: flex;flex-direction:row;align-items: center;justify-content: flex-start;">
					<text @click="clickrow(item)" style="margin :0 10px 0 40px ;" >{{item.callback_avg_num}}</text>
					<u-icon name="arrow-upward" v-if="+item.callback_avg_num > +visitlist[0].callback_avg_num" color="#19be6b"></u-icon>
					<u-icon name="arrow-downward" v-if="+item.callback_avg_num < +visitlist[0].callback_avg_num" color="#ed4014"></u-icon>
				</u-td>
			</u-tr>
		</u-table>
		<u-mask :show="loading" :mask-click-able="false">
			<view class="warp">
				<u-loading mode="circle" :show="loading" size="55" color="#19be6b"></u-loading>
			</view>
		</u-mask>
	</view>
</template>

<script>
	// import VePie from '@/v-charts/lib/pie.common'
	export default {
		data() {
			return {
				loading: false,
				visittitle: ['人员', '回访人数', '人均次数'],
				titletime: '',
				chartData:{
				  columns: ['title', 'value'],
				  rows: []
				},
				visitlist: [],
				params: {}
			}
		},
		onLoad(params) {
			this.iniaitl(params)
		},
		created() {
			this.dd.ready(() => {
				this.dd.biz.navigation.setTitle({
				  title: "回访报表", 
				})
			 })
		},
		methods: {
			iniaitl(params){
				this.params = params
				this.askData()
			},
			askData() {
				this.loading = true
				this.$u.api.report_callback_detail(this.params).then(res=>{
					this.chartData.rows = res.pie_chart_data
					this.visitlist = res.list
					this.titletime = `${res.start_time}~${res.end_time}`
					if (res.list.length>0) {
						this.visitlist.unshift({
							realname: '汇总',
							callback_num: res.total_arr.callback_num,
							callback_time_num: res.total_arr.callback_time_num,
							callback_avg_num: res.total_arr.callback_avg_num,
						})
					}
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>
